<template>
	<div>
		<app-header></app-header>
		<ul class="choose_ul">
			<li class="Moods">
				人气
				<i class="iconfont icon-xiangxia"></i>
			</li>
			<li class="Price">
				价格
				<i class="iconfont icon-xiangxia"></i>
			</li>
			<li class="Time">
				时间
				<i class="iconfont icon-xiangxia"></i>
			</li>
		</ul>
		<p class="count_result">
			共{{result_num}}个结果
		</p>
		<ol class="result_list" v-for="(item,index) in routlist" :key=index>
			<div class="Remaining" v-show="item.expire==1">
				<p>该线路{{item.maximum}}人满团</p>
				<p><i class="iconfont icon-shijian">离报名结束还剩：<span class="times" ></span></i></p>
			</div>
			<li @click="toroutInfo(item.Id)">
				<img :src="item.images"/>
				<div class="result_list_right">
					<p class="p1">
						{{item.title}}
					</p>
					<p class="p2">
						<span class="span1">{{item.star}}分</span>
						<span class="span2">{{item.comment}}条评论</span>
						<span class="span3"><b>{{item.shi_price}}</b>/人起</span>
					</p>
					<p class="p3">
						<span>{{item.group_start}}</span>
						<span>报名人数{{item.road_apply}}</span>
					</p>
					<p class="p4">
						<span :key=item2.index v-for="item2 in item.labels">{{item2.name}}</span>
					</p>
				</div>
			</li>
		</ol>
	</div>
</template>


<script>
	import Header from '@/components/Public/Header'
	export default{
		name:'Route',
		data(){
			return {
				routlist:[],
				result_num:0
			}
		},
		created(){
			this.$axios.get('House/roadlist')
			.then(res=>{
				this.routlist = res.data.list
				this.result_num = res.data.num
			}).catch(err=>console.log(err))
		},
		activated(){
			this.$emit('header',true)
		},
		components:{
			'app-header':Header
		},
		methods:{
			
		}
	}
</script>

<style scoped="scoped" lang="less">
.wh(@w, @h) {
	    width: @w;
	    height: @h;
	}
.choose_ul {
    .wh(100%, 1.2rem);
    position: relative;
    background: #fff;
    z-index: 21;
    li {
//      position: relative;
        text-align: center;
        line-height: 1.2rem;
        .wh(33.33%, 1.2rem);
        float: left;
        box-sizing: border-box;
        font-size: 0.22rem;
        border-bottom: 0.01rem solid #F6F6F6;
        border-right: 0.01rem solid #F6F6F6;
        i {
            color: #bcbbbb;
        }
        .icon-xiangshang{
            color: #FE8A76;
        }
    }
}
.count_result {
    .wh(100%, 0.8rem);
    line-height: 0.8rem;
    font-size: 0.2rem;
    color: #8D8D8D;
    border-bottom: 0.01rem solid #F6F6F6;
    padding-left: 0.3rem;
    box-sizing: border-box;
}
.result_list {
    .wh(100%, auto);
    .Remaining{
        .wh(100%,1.05rem);
        background: #F6F6F6;
        p:nth-of-type(1){
            font-size: 0.2rem;
            color: #989898;
            padding-left: 0.2rem;
            padding-top: 0.1rem;
        }
        p:nth-of-type(2){
            color: #FE8A76;
            line-height: 0.6rem;
            i{
                font-size: 0.28rem;
                padding-left: 0.2rem;
            }
        }
    }
    li {
        .wh(100%, auto);
        overflow: hidden;
        border-bottom: 0.01rem solid #F6F6F6;
        img {
            float: left;
            margin: 0.18rem 0.24rem 0.2rem 0.3rem;
            .wh(2.4rem, 2.2rem);
        }
        .result_list_right {
            float: left;
            .wh(62%, auto);
            margin: 0.18rem 0 0.2rem;
            .p1 {
                font-size: 0.26rem;
                color: #3b3b3b;
                line-height: 0.52rem;
            }
            .p2 {
                position: relative;
                line-height: 0.6rem;
                .span1 {
                    font-size: 0.18rem;
                }
                .span2 {
                    font-size: 0.16rem;
                    margin-left: 0.18rem;
                    color: #b4b4b4;
                }
                .span3 {
                    float: right;
                    color: #fe8a76;
                    font-size: 0.18rem;
                    position: absolute;
                    right: 0.3rem;
                    b {
                        font-size: 0.24rem;
                    }
                }
            }
            .p3 {
                display: block;
                height: 0.6rem;
                overflow: hidden;
                margin-top: -0.1rem;
                line-height: 0.6rem;
                span:nth-of-type(1) {
                    font-size: 0.18rem;
                    color: #FE8A76;
                }
                span:nth-of-type(2) {
                    font-size: 0.16rem;
                    color: #B4B4B4;
                }
            }
            .p4 {
                span {
                    display: inline-block;
                    float: left;
                    margin-top: 0.1rem;
                    margin-right: 0.1rem;
                    font-size: 0.16rem;
                    padding: 0.04rem 0.06rem;
                    color: #608baf;
                    border: 1px solid #608BAF;
                    border-radius: 0.1rem;
                }
            }
        }
    }
}

</style>
